<template>
  <div class="kanban-panel"></div>
</template>

<script setup>
</script>

<style scoped>
.kanban-panel {
  position: relative;
  /*height: 515px;*/
  background-color: #F6F7FA;
  /*border: 1 px solid #D8DCE6;*/
  box-shadow: 0 0 13px rgba(0, 0, 0, 0.1);
  /*background-size: 15px 15px;*/
  /* 由外部（manager.vue）计算 */
  /*padding-bottom: 56.25%; !* 16:9 -> 9 / 16 * 100 *!*/
}
.kanban-panel:not(.kanban-panel--preview)::before,
.kanban-panel:not(.kanban-panel--preview)::after {
  opacity: .5;
  content: '';
  background-repeat: repeat;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 1;
}

.kanban-panel::before {
  background: linear-gradient(to right, white 1px, transparent 1px), linear-gradient(to bottom, rgba(36, 48, 77, 0.2) 1px, transparent 1px);
  background-size: 3px 20px;
}

.kanban-panel::after {
  background: linear-gradient(to bottom, white 1px, transparent 1px), linear-gradient(to right, rgba(36, 48, 77, 0.2) 1px, transparent 1px);
  background-size: 20px 3px;
}
</style>
